<script setup lang="ts">
import { pwEditApi } from '@/api/System/user';
import { notify } from '@/utils/anted';
import {
  Modal,
  Form,
  FormItem,
  Row,
  Col,
  Input,
  RadioGroup,
  RadioButton,
  Select,
  Textarea
} from 'ant-design-vue';
import { reactive, toRaw } from 'vue';

// 定义状态
const state = reactive({
  visible: false,
  title: '新增',
  type: 'add'
});

const useForm = Form.useForm;
const modelStateRef = reactive({
  nickName: '',
  username: '',
  mobile: '',
  roleIds: null,
  email: '',
  accountNonLocked: '',
  remark: ''
});
const rulesRef = reactive({
  nickName: [
    {
      required: true,
      message: '请输入用户昵称'
    }
  ],
  username: [
    {
      required: true,
      message: '请输入用户账号'
    }
  ],
  mobile: [
    {
      required: true,
      message: '请输入手机号码'
    }
  ],
  accountNonLocked: [
    {
      required: true,
      message: '请选择账号锁定',
      trigger: 'change'
    }
  ]
});
const { validate, validateInfos, resetFields } = useForm(
  modelStateRef,
  rulesRef
);
const onSubmit = () => {
  validate()
    .then(async () => {
      if (state.type === 'add') {
        await pwEditApi('');
        notify('用户新增成功！', { type: 'success' });
      } else {
        await pwEditApi('');
        notify('用户修改成功！', { type: 'success' });
      }
      state.visible = false;
    })
    .catch(err => {
      console.log('error', err);
    });
};
const open = (type: any, title: any, row: any) => {
  state.title = title;
  state.type = type;
  if (row) {
    modelStateRef.nickName = row.nickName;
    modelStateRef.username = row.username;
    modelStateRef.mobile = row.mobile;
    modelStateRef.roleIds = row.roleIds;
    modelStateRef.email = row.email;
    modelStateRef.accountNonLocked = row.accountNonLocked;
    modelStateRef.remark = row.remark;
  }
  state.visible = true;
};
// 导出给父组件调用
defineExpose({
  open
});
</script>
<template>
  <Modal
    v-model:open="state.visible"
    :title="state.title"
    @ok="onSubmit"
    destroyOnClose
    @cancel="resetFields"
    width="800px"
  >
    <Form :labelCol="{ style: 'width: 100px' }">
      <Row>
        <Col span="12">
          <FormItem label="用户昵称" v-bind="validateInfos.nickName">
            <Input
              v-model:value="modelStateRef.nickName"
              placeholder="请输入用户昵称"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="用户账号" v-bind="validateInfos.username">
            <Input
              v-model:value="modelStateRef.username"
              placeholder="请输入用户账号"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="手机号码" v-bind="validateInfos.mobile">
            <Input
              v-model:value="modelStateRef.mobile"
              placeholder="请输入手机号码"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="分配角色">
            <Select
              v-model="modelStateRef.roleIds"
              mode="multiple"
              style="width: 100%"
              placeholder="请选择角色"
              :options="
                [...Array(25)].map((_, i) => ({
                  value: (i + 10).toString(36) + (i + 1)
                }))
              "
            ></Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="电子邮箱">
            <Input
              v-model:value="modelStateRef.email"
              placeholder="请输入电子邮箱"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="帐号锁定" v-bind="validateInfos.accountNonLocked">
            <RadioGroup
              v-model:value="modelStateRef.accountNonLocked"
              button-style="solid"
            >
              <RadioButton value="1">未锁定</RadioButton>
              <RadioButton value="2">锁定</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="备注">
            <Textarea
              v-model:value="modelStateRef.remark"
              placeholder="请输入备注"
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
</template>

<style scoped></style>
